import React, { Component } from 'react';
import './bookSettingBackground.less';

class BookSettingBackground extends Component{

	constructor(props) {
	    super(props);
	    this.state = {
	    	selectBackgroundIndex: this.props.selectBackgroundIndex 
	    }
	}

	onChangeBackground = (index) => {
		this.setState({
			selectBackgroundIndex: index
		})
		this.props.onChangeBackground(index);
	}

	render(){
		const { backgroundArrays } = this.props;

		return(
			<div className="bookSettingBackground">
				<div className="bookSettingBackgroundTitle">
					阅读背景设置
				</div>
				<ul>
					{
						backgroundArrays.map((item, index) => {
							if(index == this.state.selectBackgroundIndex){
								return(
									<li key={index} className="active">
										<span style={{background: item}} onClick={() => this.onChangeBackground(index)}></span>
									</li>
								)
							}else{
								return(
									<li key={index}>
										<span style={{background: item}} onClick={() => this.onChangeBackground(index)}></span>
									</li>
								)
							}
						})
					}
				</ul>
			</div>
		)
	}
}

export default BookSettingBackground;